import React, { useState, useEffect } from 'react'
import { Button, Table, Modal, Tree 
} from "antd"
import axios from 'axios';
import { DeleteOutlined, UnorderedListOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal
export default function RoleList() {
  const [dataSource, setdataSource] = useState([]); //每个管理员的详细信息，包括rights属性，该属性设置不同的权限
  const [isModalOpen, setisModalOpen] = useState(false)
  const [gData, setgData] = useState([])
  const [currentRights, setcurrentRights] = useState([])
  const [currenId,setcurrenId]=useState(0)
  function confirmMethod(row) {
    confirm({
      title: '你确定删除当前项吗？',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        setdataSource(dataSource.filter(item => item.id !== row.id))
        axios.delete(`/roles/${row.id}`)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => <b>{id}</b>
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (row) => {
        return <div>
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(row)} />
          <Button type="primary" shape="circle" icon={<UnorderedListOutlined />} onClick={() => openModal(row)} />
        </div>
      }
    }
  ];
  // 请求用户列表信息
  useEffect(() => {
    axios.get('/roles').then(res => {
      setdataSource(res.data)
    })
    axios.get('/rights?_embed=children').then(res => {
      res.data.forEach(item => {
        item.title = item.label
        if (item.children.length > 0) {
          item.children.forEach(c => {
            c.title = c.label
          })
        }
      })
      console.log(res.data)
      setgData(res.data)
    })
  }, [])

  // Modal对话框隐藏
  const handleCancel = () => {
    setisModalOpen(false)
  }
  // 修改完角色权限，模态框确定事件
  const handleOk = () => { 
    setisModalOpen(false);
    // 更改状态里的数据
    let result = dataSource.map(item=>{
      // 查找到当前修改的是哪一个角色的权限
      if(item.id===currenId){
        // 更改当前修改的角色的权限，...深拷贝，并且rights重新赋值为最新的currentRight
        return {
          ...item,
          rights:currentRights
        }
      }
      // 如果修改的不是当前角色，直接返回
      return item
    })
    // 把最初请求回来的dataSource状态进行更改，使组件更新
    setdataSource(result)
    // 状态更新--->同步后台数据，否则刷新之后又回复原样，并携带最新的rights数组过去，进行补丁替换
    axios.patch(`/roles/${currenId}`,{
      rights:currentRights
    })
  }

  // 点击按钮查看当前用户的权限，并让Modal组件显示
  const openModal = (row) => {
    setisModalOpen(true)
    setcurrentRights(row.rights)
    setcurrenId(row.id)
  }
  // 点击Tree组件checkBox的化，重新修改被选中的权限
  const onCheck = (checkeys) => {
    // checkKeys得到的是被选中的权限数组，接着.check是因为Tree组件加入了checkStrictly属性，checkeys会变成一个对象，其中的checked才是我们想要的数据
    setcurrentRights(checkeys.checked)
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(row) => row.id}>
      </Table>
      <Modal title="权限分配" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          className="draggable-tree"
          // defaultCheckedKeys={currentRights}  //使用带有default的属性，只在第一次生效，后面状态改变的化，也不会生效了
          checkedKeys={currentRights}   //这样的话成为了受控组件
          onCheck={onCheck}
          checkable
          checkStrictly //该属性值为true，使子树节点脱离父节点
          treeData={gData}
        />
      </Modal>
    </div>
  )
}
// /表格每一行要有key值，而本组件返回的数据没有key属性，所以通过rowKey告诉Table，使用row.id当作key值，row是当前这一行的对象